<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <!-- 账单数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <num-card
            title="账单数量"
            subtitle="本月"
            detailUrl="/accountOrder/index"
            :totalNum="billNum"
          />
        </div>
      </el-col>
      <!-- 待上传的账单数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <num-card
            title="待上传账单数量"
            subtitle="本月"
            detailUrl="/accountOrderWait/index"
            :totalNum="waitUploadBillNum"
          />
        </div>
      </el-col>
      <!-- 已过期的账单数量 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <num-card
            title="已过期账单数量"
            subtitle="全部"
            detailUrl="/accountOrderExp/index"
            :totalNum="expiredBillNum"
          />
        </div>
      </el-col>
      <!-- 保险将到期的房产 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three :obj="rent1" :datas="data1" @houseDetail="insurance">
            <div slot="a" class="p1"></div>
          </lase-three>
        </div>
      </el-col>
      <!-- 保险已到期的房产 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three :obj="rent2" :datas="data2" @houseDetail="insurance">
            <!-- <div slot="a" class="p1" @click="toHouse">查看详情 ></div> -->
            <div slot="a" class="p1"></div>
          </lase-three>
        </div>
      </el-col>
      <!-- 将例行检查的房产 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three :obj="house" :datas="data3" @houseDetail="toBill">
            <div slot="a" class="p1"></div>
          </lase-three>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LaseTwo from "./components/laseTwo";
import laseThree from "./components/laseThree";
import RentaThreelNumCard from "./components/rentaThreelNumCard";
import LaseThree from "./components/laseThree.vue";
import {
  insuranceSoonExpireHouseApi,
  insuranceExpiredHouseApi,
  soonCheckUpHouseApi,
  billNum,
  waitUploadBillNum,
  expiredBillNum,
} from "@/api/dashboard";
import { myTimeDian } from "@/utils/common";
import NumCard from "./components/numCard.vue";
export default {
  components: {
    LaseTwo,
    laseThree,
    RentaThreelNumCard,
    LaseThree,
    NumCard,
  },
  data() {
    return {
      toBeUploaded: {
        tit: "待上传的账单数量",
        tit1: "0-10天",
        tit2: "11-20天",
        tit3: "21-30天",
      },
      overdueBills: {
        tit: "已过期账单数量",
        tit1: "0-10天",
        tit2: "11-20天",
        tit3: "21-30天",
      },
      rent1: {
        tit: "保险将到期的房产",
        one: "房产地址",
        two: "PM",
        three: "BD",
        four: "运营",
        five: "到期日期",
      },
      rent2: {
        tit: "保险已到期的房产",
        one: "房产地址",
        two: "PM",
        three: "BD",
        four: "运营",
        five: "到期日期",
      },
      house: {
        tit: "将例行检查的房产",
        one: "房产地址",
        two: "PM",
        three: "BD",
        four: "运营",
        five: "下次检查时间",
      },
      data1: {
        totalNum: 0,
        list: [],
      },
      data2: {
        totalNum: 0,
        list: [],
      },
      data3: {
        totalNum: 0,
        list: [],
      },
      billNum: 0,
      waitUploadBillNum: 0,
      expiredBillNum: 0,
    };
  },
  created() {
    this.insuranceSoonExpireHouse();
    this.insuranceExpiredHouse();
    this.soonCheckUpHouse();
    this.getBillNum();
    this.getWaitUploadBillNum();
    this.getExpiredBillNum();
  },
  methods: {
    async getBillNum() {
      var res = await billNum();
      this.billNum = res.data.totalNum;
    },
    async getWaitUploadBillNum() {
      var res = await waitUploadBillNum();
      this.waitUploadBillNum = res.data.totalNum;
    },
    async getExpiredBillNum() {
      var res = await expiredBillNum();
      this.expiredBillNum = res.data.totalNum;
    },
    async insuranceSoonExpireHouse() {
      var res1 = await insuranceSoonExpireHouseApi();
      if (res1.code != 200) return;
      var list = res1.data.list;
      this.data1.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          PM: item.pmName,
          BD: item.bdName,
          four: item.operatorName,
          five: myTimeDian({ createdTime: item.date }),
        };
      });
      this.data1.totalNum = res1.data.totalNum;
    },
    async insuranceExpiredHouse() {
      var res2 = await insuranceExpiredHouseApi();
      if (res2.code != 200) return;
      var list = res2.data.list;
      this.data2.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          PM: item.pmName,
          BD: item.bdName,
          four: item.operatorName,
          five: myTimeDian({ createdTime: item.date }),
        };
      });
      this.data2.totalNum = res2.data.totalNum;
    },
    async soonCheckUpHouse() {
      var res3 = await soonCheckUpHouseApi();
      if (res3.code != 200) return;
      var list = res3.data.list;
      this.data3.list = list.map((item) => {
        return {
          id: item.id,
          address: item.address,
          PM: item.pmName,
          BD: item.bdName,
          four: item.operatorName,
          five: myTimeDian({ createdTime: item.date }),
        };
      });
      this.data3.totalNum = res3.data.totalNum;
    },
    viewLeaseDetail() {
      const routerURl = this.$router.resolve({
        path: "/billing/index",
      });
      window.open(routerURl.href, "_blank");
    },
    insurance(id) {
      const routerURl = this.$router.resolve({
        path: "/house/pageDetail",
        query: { id: id },
      });
      window.open(routerURl.href, "_blank");
    },
    toHouse() {
      const routerURl = this.$router.resolve({
        path: "/house/page",
      });
      window.open(routerURl.href, "_blank");
    },
    toBill(id) {
      this.$router.push({
        path: "/billing/report",
        query: { id },
      });
      // window.open(routerURl.href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.lase-box {
  height: 250px !important;
}
.p1 {
  text-align: right;
  margin-top: 15px;
  font-size: 13px;
  color: #5ac6b7;
}
</style>
